<script>
import { addBuildingAPI } from '@/api/park/building'
import { add } from 'script-ext-html-webpack-plugin/lib/custom-attributes'

export default {
  name: 'buildingForm',
  props: {
    edit: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      /* 表单数据对象 */
      formData: {
        name: '',
        floors: '',
        area: '',
        propertyFeePrice: ''
      },
      /* 表单规则对象 */
      formRules: {
        name: [
          { required: true, message: '请输入楼宇名称', trigger: 'blur' }
        ],
        floors: [
          { required: true, message: '请输入楼宇层数', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请输入在管面积', trigger: 'blur' }
        ],
        propertyFeePrice: [
          { required: true, message: '请输入物业费', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    /* 添加楼宇的回调函数 */
    async addBuilding() {
      try {
        const addResult = await this.$store.dispatch('building/addBuilding', this.formData)
        this.$message.success(addResult)
        this.$emit('success')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 编辑楼宇的回调函数 */
    async updateBuilding() {
      try {
        delete this.formData.status
        const updateResult = await this.$store.dispatch('building/updateBuilding', this.formData)
        this.$message.success(updateResult)
        this.$emit('success')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    findBuilding(row) {
      this.formData = { ...row }
    },
    /* 点击取消按钮的回调函数 */
    handleCancel() {
      this.$emit('cancel')
    },
    /* 点击确定按钮的回调函数 */
    async handleSubmit() {
      const valida = await this.$refs.formRef.validate().catch(error => error)
      if (!valida) return
      if (this.edit) {
        await this.updateBuilding()
      } else {
        await this.addBuilding()
      }
    },
    /* 重置表单数据的回调函数 */
    resetForm() {
      this.$refs.formRef.resetFields()
    }
  },
  emits: ['success', 'cancel']
}
</script>

<template>
  <el-form label-width="100px" :model="formData" :rules="formRules" ref="formRef">
    <el-form-item label="楼宇名称" prop="name">
      <el-input placeholder="请输入楼宇名称" v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="楼宇层数" prop="floors">
      <el-input placeholder="请输入楼宇层数" v-model="formData.floors"></el-input>
    </el-form-item>
    <el-form-item label="在管面积" prop="area">
      <el-input placeholder="请输入在管面积" v-model="formData.area">
        <template slot="append">m²</template>
      </el-input>
    </el-form-item>
    <el-form-item label="物业费" prop="propertyFeePrice">
      <el-input placeholder="请输入物业费" v-model="formData.propertyFeePrice">
        <template slot="append">元/m²</template>
      </el-input>
    </el-form-item>

    <el-form-item>
      <el-button size="small" @click="handleCancel">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-form {
  width: 80%;
}
</style>
